<!DOCTYPE html>
<script src="./static/lib/vue.js"></script>

<div id="main">
	<div v-if="isLogin" >
		用户名
		<div v-show="showInfoState">
			<div>年龄</div>
			<div>身高</div>
			<div>性别</div>
		</div>
		<button @click=".howInfoState = !showInfoState">{{ buttonText }}</button>
	</div>
	<div v-else >
		<button @click="login()" >登录</button>
	</div>
</div>

<script>
var vm = new Vue({
	el: '#main',
	data: {
		isLogin: false,
		showInfoState: false,
	},
	methods: {
		// login: function() {},
		login() {
			console.log('登录')
			this.isLogin = true
		},
	},
	computed: {
		buttonText() {
			return this.showInfoState ? '隐藏用户信息' : '显示用户信息'
		}
	}
})
</script>

<script src="">
//v-on指令,用于DOM的事件绑定,它支持所有的DOM事件, v-on的缩写是@, 如要绑定onclick事件可以使用v-on:click缩写是@click
</script>
